<template>
	<view class="icongroup" :style="'padding:' + mydata.padding.top + 'rpx ' + mydata.padding.lr + 'rpx ' + mydata.padding.bottom + 'rpx '">
		<view
			class="containers"
			:style="
				'height:' +
					(48 + mydata.width) * mydata.rows * 2 +
					'rpx;background:' +
					mydata.bgcolor +
					';border-radius:' +
					mydata.radius.top +
					'rpx ' +
					mydata.radius.top +
					'rpx ' +
					mydata.radius.bottom +
					'rpx ' +
					mydata.radius.bottom +
					'rpx;'
			"
		>
			<swiper :style="'height:' + (48 + mydata.width) * mydata.rows * 2 + 'rpx'" :autoplay="false" indicator-position="none">
				<swiper-item v-for="(num, index) in ctabs" :key="index">
					<view class="bgs">
						<vcustomer :style="'width:' + 100 / mydata.num + '%;'" v-for="(item, i) in list[index]" :linkdata="item.linkdata">
							<view class="icon-item" :key="i" @click="Jumpurl()">
								<view class="icon-box">
									<vimage class="img_box" :style="bd" :src="item.icon"></vimage>
									<!-- <el-image fit="fit"></el-image> -->
								</view>
								<text class="title" :style="'color:' + mydata.textcolor">{{ item.text }}</text>
							</view>
						</vcustomer>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import util from '@/common/util.js';

export default {
	props: {
		mydata: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			list: []
		};
	},
	mounted() {
		this.getlist();
	},
	computed: {
		//跑马灯面板数
		ctabs() {
			let n = 1;
			switch (this.mydata.rows) {
				case 1:
					//单行
					n = Math.ceil(this.mydata.list.length / this.mydata.num);
					break;
				case 2:
					//双行
					n = Math.ceil(this.mydata.list.length / (this.mydata.num * 2));
					break;
				default:
					break;
			}
			return n;
		},
		bd() {
			let s = 'width: ' + this.mydata.width * 2 + 'rpx; height: ' + this.mydata.width * 2 + 'rpx;';
			switch (this.mydata.type) {
				case 1:
					s = s + 'border-radius:0;';
					break;
				case 2:
					s = s + 'border-radius:20rpx;';
					break;
				case 3:
					s = s + 'border-radius:50%;';
					break;
				default:
					break;
			}
			return s;
		}
	},
	methods: {
		getlist() {
			let list = [];
			for (var i = 0; i < this.ctabs; i++) {
				let mlist = this.mydata.list.slice(0 + this.mydata.num * (i * this.mydata.rows), this.mydata.num * this.mydata.rows * (i + 1));

				list.push(mlist);
			}
			this.list = list;
		}
	}
};
</script>

<style lang="scss" scoped>
.icongroup {
	.containers{
		overflow: hidden;
	}
	.bgs {
		display: flex;
		flex-wrap: wrap;
		.icon-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			// height: 85px;
			// border: 1rpx solid red;
			.icon-box {
				// margin: 0 auto;
				// border: 1rpx solid #2D8CF0;
				display: flex;
				flex-direction: column;
				position: relative;
				padding: 32rpx 0 16rpx;

				.img_box {
					// width: 160rpx;
					// height: 160rpx;
					overflow: hidden;

					// img {
					// 	width: 100%;
					// }
				}

				.custom-icon {
					font-size: 56rpx;
					height: 56rpx;
					line-height: 56rpx;
					display: flex;
					flex-direction: column;
				}
			}
			.title {
				text-align: center;
				margin: 0 auto;
				font-size: 24rpx;
				line-height: 34rpx;
			}
		}
	}
}
</style>
